package com.midele.goodstuff.ui.record

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ExperimentalLayoutApi
import androidx.compose.foundation.layout.FlowRow
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.constraintlayout.compose.Dimension
import androidx.hilt.navigation.compose.hiltViewModel
import androidx.navigation.NavHostController
import com.midele.goodstuff.R
import com.midele.goodstuff.ui.component.LeftIconTextRow
import com.midele.goodstuff.ui.component.TagItem
import com.midele.goodstuff.ui.search.screen.SearchScreen
import com.midele.goodstuff.ui.theme.Black12
import com.midele.goodstuff.ui.theme.Black21
import com.midele.goodstuff.ui.theme.Gray64
import com.midele.goodstuff.ui.theme.Gray96
import com.midele.goodstuff.ui.theme.WhiteDC
import com.midele.goodstuff.ui.theme.YellowFC
import com.midele.goodstuff.util.LogUtils
import com.midele.goodstuff.viewmodel.RecordFirstViewModel
import com.midele.goodstuff.viewmodel.SearchViewModel

@Composable
internal fun RecordFirstRoute(
    modifier: Modifier = Modifier,
    viewModel: RecordFirstViewModel = hiltViewModel(),
    navController: NavHostController,
) {
    RecordFirstScreen(viewModel,navController)
}

@OptIn(ExperimentalMaterial3Api::class, ExperimentalLayoutApi::class)
@Composable
fun RecordFirstScreen(
    viewModel: RecordFirstViewModel,
    navController: NavHostController,
) {
    val qualityList = listOf("全品","断珠","断补","原粘")
    val shapeList = listOf("长珠","圆珠")
    Scaffold(
        topBar = {
            TopAppBar(
                title = {
                    Text(
                        "传承登记",
                        color = Color.White,
                        fontSize = 17.sp,
                        fontWeight = FontWeight.Bold,
                        textAlign = TextAlign.Center,
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { navController.popBackStack() }) {
                        Icon(
                            painter = painterResource(id = R.mipmap.ic_white_back_arrow),
                            contentDescription = "返回"
                        )
                    }
                }
            )
        },
        content = { paddingValues ->
            val bottomPadding = paddingValues.calculateBottomPadding() + 16.dp
            val topPadding = paddingValues.calculateTopPadding()
            Box(
                modifier = Modifier
                    .background(Color.Black)
                    .fillMaxSize()
                    .padding(bottom = bottomPadding, top = topPadding)
            ) {
                Column(
                    modifier = Modifier
                        .fillMaxSize()
                        .padding(start = 16.dp, end = 16.dp, bottom = 80.dp)
                        .verticalScroll(rememberScrollState())
                ) {
                    Column(
                        modifier = Modifier
                            .fillMaxWidth()
                            .clip(RoundedCornerShape(12.dp))
                            .background(YellowFC.copy(alpha = 0.1f))
                            .padding(top = 12.dp, bottom = 12.dp, start = 8.dp, end = 8.dp)

                    ) {
                        LeftIconTextRow(
                            iconId = R.mipmap.ic_yellow_warn,
                            spacing = 2.dp,
                            iconSize = 24.dp,
                            text = "您正在代为登记一件归属权不属于您的物品。",
                            textSize = 14.sp,
                            textColor = YellowFC
                        )
                        Spacer(modifier = Modifier.height(12.dp))
                        Column(
                            modifier = Modifier
                                .fillMaxWidth()
                                .clip(RoundedCornerShape(12.dp))
                                .background(Black12)
                                .padding(12.dp)
                        ) {
                            Text(
                                "1.请确保已获得物品主人的授权。",
                                color = Gray96,
                                fontSize = 12.sp,
                                textAlign = TextAlign.Start,
                            )
                            Text(
                                "2.您需要知晓并填写物品主人的手机号。",
                                color = Gray96,
                                fontSize = 12.sp,
                                textAlign = TextAlign.Start,
                            )
                            Text(
                                "3.登记完成后，物品将直接存入对方的账户草稿箱。",
                                color = Gray96,
                                fontSize = 12.sp,
                                textAlign = TextAlign.Start,
                            )
                        }
                    }

                    Spacer(modifier = Modifier.height(12.dp))
                    ConstraintLayout(
                        modifier = Modifier
                            .fillMaxWidth()
                            .clip(RoundedCornerShape(16.dp))
                            .background(Black21)
                            .padding(12.dp)
                    ) {
                        val (titleLayout, phoneTitleLayout, phoneValueLayout, codeTitleLayout, codeValueLayout, getCodeBtnLayout, btwLine) = createRefs()
                        Text(
                            "归属人",
                            color = Color.White,
                            fontSize = 16.sp,
                            textAlign = TextAlign.Start,
                            modifier = Modifier.constrainAs(titleLayout) {
                                top.linkTo(parent.top)
                                start.linkTo(parent.start)
                            }
                        )
                        Text(
                            "手机号码",
                            color = WhiteDC,
                            fontSize = 14.sp,
                            textAlign = TextAlign.Start,
                            modifier = Modifier
                                .width(60.dp)
                                .constrainAs(phoneTitleLayout) {
                                    top.linkTo(titleLayout.bottom, 16.dp)
                                    start.linkTo(parent.start)
                                }
                        )
                        TransparentHintBasicTextField(
                            modifier = Modifier.constrainAs(phoneValueLayout) {
                                top.linkTo(phoneTitleLayout.top)
                                bottom.linkTo(phoneTitleLayout.bottom)
                                start.linkTo(phoneTitleLayout.end, 16.dp)
                            }, onValueChange = {

                            }
                        )

                        Spacer(
                            modifier = Modifier
                                .background(Gray64)
                                .height(1.dp)
                                .fillMaxWidth()
                                .constrainAs(btwLine) {
                                    top.linkTo(phoneTitleLayout.bottom, 20.dp)
                                    start.linkTo(parent.start)
                                })

                        Text(
                            "验证码",
                            color = WhiteDC,
                            fontSize = 14.sp,
                            textAlign = TextAlign.Start,
                            modifier = Modifier
                                .width(60.dp)
                                .constrainAs(codeTitleLayout) {
                                    top.linkTo(btwLine.bottom, 16.dp)
                                    start.linkTo(parent.start)
                                }
                        )
                        TransparentHintBasicTextField(
                            modifier = Modifier.constrainAs(codeValueLayout) {
                                top.linkTo(codeTitleLayout.top)
                                bottom.linkTo(codeTitleLayout.bottom)
                                start.linkTo(codeTitleLayout.end, 16.dp)
                            }, onValueChange = {

                            }
                        )

                        Text(
                            "获取验证码",
                            color = YellowFC,
                            fontSize = 14.sp,
                            textAlign = TextAlign.Start,
                            modifier = Modifier.constrainAs(getCodeBtnLayout) {
                                top.linkTo(codeValueLayout.top)
                                bottom.linkTo(codeValueLayout.bottom)
                                end.linkTo(parent.end)
                            }
                        )
                    }

                    Spacer(modifier = Modifier.height(16.dp))
                    ConstraintLayout(
                        modifier = Modifier
                            .fillMaxWidth()
                            .clip(RoundedCornerShape(16.dp))
                            .background(Black21)
                            .padding(12.dp)
                    ) {
                        val (titleLayout, firstTypeLayout, secondTypeLayout, typeLineLayout, nameLayout,
                            nameValueLayout, nameLineLayout,sizeLongLayout,sizeLongValueLayout,sizeWidthLayout,
                            sizeWidthValueLayout,sizeLineLayout,qualityLayout,qualityLineLayout,shapeLayout) = createRefs()
                        Text(
                            "物品信息",
                            color = Color.White,
                            fontSize = 16.sp,
                            textAlign = TextAlign.Start,
                            modifier = Modifier.constrainAs(titleLayout) {
                                top.linkTo(parent.top)
                                start.linkTo(parent.start)
                            }
                        )
                        Text(
                            "古珠",
                            color = WhiteDC,
                            fontSize = 14.sp,
                            textAlign = TextAlign.Start,
                            modifier = Modifier
                                .width(60.dp)
                                .constrainAs(firstTypeLayout) {
                                    top.linkTo(titleLayout.bottom, 16.dp)
                                    start.linkTo(parent.start)
                                    width = Dimension.percent(0.3f)
                                }
                        )
                        Text(
                            "至纯天珠",
                            color = Color.White,
                            fontSize = 14.sp,
                            fontWeight = FontWeight.Bold,
                            textAlign = TextAlign.Start,
                            modifier = Modifier
                                .width(60.dp)
                                .constrainAs(secondTypeLayout) {
                                    top.linkTo(firstTypeLayout.top)
                                    start.linkTo(firstTypeLayout.end)
                                    bottom.linkTo(firstTypeLayout.bottom)
                                    width = Dimension.percent(0.7f)
                                }
                        )
                        Spacer(
                            modifier = Modifier
                                .background(Gray64)
                                .height(1.dp)
                                .fillMaxWidth()
                                .constrainAs(typeLineLayout) {
                                    top.linkTo(firstTypeLayout.bottom, 20.dp)
                                    start.linkTo(parent.start)
                                })

                        Text(
                            "名称",
                            color = WhiteDC,
                            fontSize = 14.sp,
                            textAlign = TextAlign.Start,
                            modifier = Modifier
                                .width(60.dp)
                                .constrainAs(nameLayout) {
                                    top.linkTo(typeLineLayout.bottom, 16.dp)
                                    start.linkTo(parent.start)
                                    width = Dimension.percent(0.3f)
                                }
                        )
                        TransparentHintBasicTextField(
                            hintText = "请输入物品名称（2-30字）",
                            horizontalPadding = 0.dp,
                            verticalPadding = 0.dp,
                            modifier = Modifier.constrainAs(nameValueLayout) {
                                top.linkTo(nameLayout.top)
                                bottom.linkTo(nameLayout.bottom)
                                start.linkTo(nameLayout.end)
                                width = Dimension.percent(0.7f)
                            }, onValueChange = {

                            }
                        )

                        Spacer(
                            modifier = Modifier
                                .background(Gray64)
                                .height(1.dp)
                                .fillMaxWidth()
                                .constrainAs(nameLineLayout) {
                                    top.linkTo(nameLayout.bottom, 20.dp)
                                    start.linkTo(parent.start)
                                })

                        Text(
                            "尺寸mm(长)",
                            color = WhiteDC,
                            fontSize = 14.sp,
                            textAlign = TextAlign.Start,
                            modifier = Modifier
                                .width(60.dp)
                                .constrainAs(sizeLongLayout) {
                                    top.linkTo(nameLineLayout.bottom, 16.dp)
                                    start.linkTo(parent.start)
                                    width = Dimension.percent(0.7f)
                                }
                        )
                        Row(
                            verticalAlignment = Alignment.CenterVertically,
                            horizontalArrangement = Arrangement.SpaceEvenly,
                            modifier = Modifier.constrainAs(sizeLongValueLayout) {
                                top.linkTo(sizeLongLayout.top)
                                bottom.linkTo(sizeLongLayout.bottom)
                                start.linkTo(sizeLongLayout.end)
                                width = Dimension.percent(0.3f)
                            }
                        ) {
                            IconButton(
                                onClick = {

                                },
                                modifier = Modifier.size(24.dp)
                            ) {
                                Image(
                                    painter = painterResource(id = R.mipmap.ic_reduce_size),
                                    contentDescription = null
                                )
                            }

                            BasicTextField(
                                value = "1",
                                onValueChange = {

                                },
                                singleLine = true,
                                textStyle = TextStyle(
                                    color = Color.White, // 输入文字的颜色
                                    fontSize = 16.sp,
                                    textAlign = TextAlign.Center
                                ),
                                cursorBrush = SolidColor(Color.Transparent), // 光标颜色
                                decorationBox = { innerTextField ->
                                    innerTextField() // 实际的输入区域
                                },
                                modifier = Modifier.size(24.dp).padding(0.dp).align(alignment = Alignment.CenterVertically)
                            )


                            IconButton(
                                onClick = {

                                },
                                enabled = true
                            ) {
                                Image(
                                    modifier = Modifier.size(24.dp),
                                    painter = painterResource(id = R.mipmap.ic_add_size),
                                    contentDescription = null
                                )
                            }
                        }

                        Text(
                            "尺寸mm(宽)",
                            color = WhiteDC,
                            fontSize = 14.sp,
                            textAlign = TextAlign.Start,
                            modifier = Modifier
                                .width(60.dp)
                                .constrainAs(sizeWidthLayout) {
                                    top.linkTo(nameLineLayout.bottom, 16.dp)
                                    start.linkTo(parent.start)
                                    width = Dimension.percent(0.7f)
                                }
                        )
                        Row(
                            verticalAlignment = Alignment.CenterVertically,
                            horizontalArrangement = Arrangement.SpaceEvenly,
                            modifier = Modifier.constrainAs(sizeWidthValueLayout) {
                                top.linkTo(sizeWidthLayout.top)
                                bottom.linkTo(sizeWidthLayout.bottom)
                                start.linkTo(sizeWidthLayout.end)
                                width = Dimension.percent(0.3f)
                            }
                        ) {
                            IconButton(
                                onClick = {

                                },
                                modifier = Modifier.size(24.dp)
                            ) {
                                Image(
                                    painter = painterResource(id = R.mipmap.ic_reduce_size),
                                    contentDescription = null
                                )
                            }

                            BasicTextField(
                                value = "1",
                                onValueChange = {

                                },
                                singleLine = true,
                                textStyle = TextStyle(
                                    color = Color.White, // 输入文字的颜色
                                    fontSize = 16.sp,
                                    textAlign = TextAlign.Center
                                ),
                                cursorBrush = SolidColor(Color.Transparent), // 光标颜色
                                decorationBox = { innerTextField ->
                                    innerTextField() // 实际的输入区域
                                },
                                modifier = Modifier.size(24.dp).padding(0.dp).align(alignment = Alignment.CenterVertically)
                            )


                            IconButton(
                                onClick = {

                                },
                                enabled = true
                            ) {
                                Image(
                                    modifier = Modifier.size(24.dp),
                                    painter = painterResource(id = R.mipmap.ic_add_size),
                                    contentDescription = null
                                )
                            }
                        }

                        Spacer(
                            modifier = Modifier
                                .background(Gray64)
                                .height(1.dp)
                                .fillMaxWidth()
                                .constrainAs(sizeLineLayout) {
                                    top.linkTo(sizeWidthLayout.bottom, 20.dp)
                                    start.linkTo(parent.start)
                                })


                        Box(modifier = Modifier.constrainAs(qualityLayout) {
                            top.linkTo(sizeLineLayout.bottom, 16.dp)
                            start.linkTo(parent.start)
                        }) {
                            Text("品质",color = WhiteDC,fontSize = 14.sp,modifier = Modifier.align (alignment = Alignment.TopStart))
                            FlowRow(
                                modifier = Modifier
                                    .fillMaxWidth()
                                    .align(Alignment.TopEnd),
                                horizontalArrangement = Arrangement.spacedBy(12.dp),
                                verticalArrangement = Arrangement.spacedBy(12.dp)
                            ) {
                                qualityList.forEach { tag ->
                                    TagItem(text = tag, onClick = { selTag ->
                                        LogUtils.d("SearchScreen", "点击了333$selTag")
                                    })
                                }
                            }
                        }

                        Spacer(
                            modifier = Modifier
                                .background(Gray64)
                                .height(1.dp)
                                .fillMaxWidth()
                                .constrainAs(qualityLineLayout) {
                                    top.linkTo(qualityLayout.bottom, 20.dp)
                                    start.linkTo(parent.start)
                                })


                        Box(modifier = Modifier.constrainAs(shapeLayout) {
                            top.linkTo(qualityLineLayout.bottom, 16.dp)
                            start.linkTo(parent.start)
                        }) {
                            Text("形状",color = WhiteDC,fontSize = 14.sp,modifier = Modifier.align (alignment = Alignment.TopStart))
                            FlowRow(
                                modifier = Modifier
                                    .fillMaxWidth()
                                    .align(Alignment.TopEnd),
                                horizontalArrangement = Arrangement.spacedBy(12.dp),
                                verticalArrangement = Arrangement.spacedBy(12.dp)
                            ) {
                                shapeList.forEach { tag ->
                                    TagItem(text = tag, onClick = { selTag ->
                                        LogUtils.d("SearchScreen", "点击了333$selTag")
                                    })
                                }
                            }
                        }

                    }
                }

                Button(
                    onClick = {

                    },
                    modifier = Modifier.height(50.dp).fillMaxWidth().align(Alignment.BottomCenter),
                    shape = RoundedCornerShape(100.dp),
                    colors = ButtonDefaults.buttonColors(containerColor = YellowFC)
                ) {
                    Text("下一步",color = Black12, fontSize = 18.sp)
                }

            }
        }
    )
}

@Composable
fun TransparentHintBasicTextField(
    modifier: Modifier = Modifier,
    hintText: String = "请输入归属人手机号码",
    verticalPadding: Dp = 12.dp,
    horizontalPadding: Dp = 16.dp,
    onValueChange: (String) -> Unit
) {
    var text by remember { mutableStateOf("") }

    BasicTextField(
        value = text,
        onValueChange = {
            text = it
            onValueChange(it)
        },
        modifier = modifier
            .fillMaxWidth()
            .padding(
                vertical = verticalPadding,
                horizontal = horizontalPadding
            ), // 添加一些内边距以模拟 TextField 的外观
        textStyle = TextStyle(
            color = Color.Black, // 输入文字的颜色
            fontSize = 16.sp
        ),
        keyboardOptions = KeyboardOptions(
            keyboardType = KeyboardType.Phone
        ),
        singleLine = true,
        cursorBrush = SolidColor(MaterialTheme.colorScheme.primary), // 光标颜色
        decorationBox = { innerTextField ->
            // 这里是关键，用于显示 hint
            if (text.isEmpty()) {
                Text(
                    text = hintText,
                    color = Color.Gray, // Hint 颜色
                    fontSize = 16.sp
                )
            }
            innerTextField() // 实际的输入区域
        }
    )
}
